<template>
  <div class="addUserIndex">
    <userHeader />
    <div class="breadClum">
      <span>
           <router-link :to="{path:'/pageIndex'}" >  <a class="bread1">当前位置：首页  >  </a></router-link>
           <router-link :to="{path:'/systemSetting'}" > <a class="bread2">系统设置  ></a></router-link>
          <a class="bread2">添加用户</a>
      </span>
    </div>
    <el-form :label-position="labelPosition" ref="editorForm" :rules="rules" label-width="160px" :model="form">
      <div class="e-form-top">
        <el-form-item label="用户名" prop="user_name">
          <el-input v-model="form.user_name" ></el-input>
        </el-form-item>
        <el-form-item label="真实姓名"  prop="real_name">
          <el-input v-model="form.real_name"></el-input>
        </el-form-item>
        <el-form-item label="角色选择"  prop="role_name">
          <el-select v-model="form.role_name" placeholder="请选择角色">
            <el-option :label=item.role_name :value=item.role_id v-for="(item,index) in roleType" :key="index">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="评价单位"  prop="company_name" class="e-tree-1" >
          <el-tree
            v-loading="loading"
            :data="data3"
            :props="defaultProps"
            :show-checkbox="true"
            default-expand-all
            :check-on-click-node="true"
            node-key="company_id"
            ref="tree"
            @check="checkTest"
            @check-change="setCheckedKeys"
            :expand-on-click-node="false"
            :check-strictly=true
            highlight-current
            @current-change="changeCurrent"
          >
          </el-tree>
        </el-form-item>
        <el-form-item   prop="section_name" label="部门">
          <el-select v-model="form.section_name" placeholder="请选择部门" >
            <el-option :label=item.section_name :value=item.section_id  v-for="(item,index) in sectionType" :key="index" >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="岗位"   prop="user_position">
          <el-input v-model="form.user_position" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码"  prop="user_pwd">
          <el-input v-model="form.user_pwd" autocomplete="off"></el-input>
        </el-form-item>
        <!--<el-form-item label="新密码"  prop="user_pwd_confirm">-->
          <!--<el-input v-model="form.user_pwd_confirm" autocomplete="off"></el-input>-->
        <!--</el-form-item>-->
        <el-form-item label="负责人标识"  >
          <el-radio v-model="form.leader_identify" label="1">是</el-radio>
          <el-radio v-model="form.leader_identify" label="0">否</el-radio>
        </el-form-item>
        <el-form-item label="直管领导"  >
          <el-radio v-model="form.guidance_identify" label="1">是</el-radio>
          <el-radio v-model="form.guidance_identify" label="0">否</el-radio>
        </el-form-item>
        <el-form-item label="直管部门" prop="regulate_section" v-if="form.guidance_identify==1">
          <el-select v-model="regulate_section" multiple placeholder="请选择"><!---->
            <el-option
              v-for="item in sectionType2"
              :key="item.section_name"
              :label="item.section_name"
              :disabled="item.is_choice==0"
              :value="item.section_id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户状态"  >
          <el-radio v-model="form.user_state" label="1">在用</el-radio>
          <el-radio v-model="form.user_state" label="0">停用</el-radio>
        </el-form-item>


        <el-form-item class="el-form-btn">
          <el-button type="primary" @click="onSubmit('editorForm')">确认</el-button>
        </el-form-item>
      </div>
    </el-form>
    <fixed />
  </div>
</template>
<script>
  import fixed from '@/components/fixed.vue'
  import userHeader from '@/components/header.vue'
  import {strToHexCharCode,toFixedBit,dec2hex,formatTime,getNewDate } from  '@/utils/index.js'
  export default({
    data (){
      var checkSection=(rule, value, callback) =>{
        console.log(this.form.section_name)
        if(!this.form.section_name){
          return callback(new Error('请选择部门'));
        }else {
          callback()
        }
      };
      var checkCompany=(rule, value, callback) =>{
          console.log('!!!!!!!!!!')
          console.log(value)
          console.log(this.currentNodeKey)
          if(this.currentNodeKey==undefined||this.currentNodeKey==''){
            callback(new Error('请选择评价单位'));
          }else if(!this.currentNodeKey.company_name){
            callback(new Error('请选择评价单位'));
          }
          else {
          callback()
        }
      };
      var checkUser = (rule, value, callback) => {
        if (value === ''||value== undefined) {
          callback(new Error('请填写用户名'));
        }
        else {
          callback();
        }
      };
      var checkRealName = (rule, value, callback) => {
        console.log(value)
        var regName =/^[\u4E00-\u9FA5]{2,4}$/
        if (value === ''||value== undefined) {
          callback(new Error('真实姓名由中文组成'));
        }else if(!regName.test(value)){
          callback(new Error('请填写真实姓名'))
        }
        else {
          callback();
        }
      };
      var validatePosition = (rule, value, callback) => {
       if(value==''||value==undefined){
         callback('请输入岗位')
       } else {
          callback();
        }
      };
      var validatePass = (rule, value, callback) => {
        if (value == ''||value==undefined) {
          callback(new Error('请输入新密码'));
        }else if(value.length<6){
          callback(new Error('密码长度不得低于6位!'));
        }
        else {
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
          console.log(this.form.user_pwd)
        if (value === ''||value==undefined) {
          callback(new Error('请再次输入密码'));
        }else if(value.length<6){
          callback(new Error('密码长度不低于6位!'));
        }
        else if (value != this.form.user_pwd) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      var checkRole =(rule, value, callback) => {
          console.log(value)
         if(value==undefined ||value==''){
           callback(new Error('请选择角色!'));
         }else{
           this.form.role_id=value
           callback();
         }
      };
      var validateLead=(rule, value, callback) => {
        if(value==undefined ||value==''){
          callback(new Error('请选设置负责人标识!'));
        }else{
          callback();
        }
      };
      var validatState =(rule, value, callback) => {
        if(value==undefined ||value==''){
          callback(new Error('请选择用户状态'));
        }else{
          callback();
        }
      };
      return {
        loading:true,
        manual:true,
        radio:0,
        radioStatus:0,
        labelPosition: 'right',
        roleType:[],
        data3:[],
        sectionType:[],
        sectionType2:[],

        regulate_section:[],
        i:0,
        formLabelWidth:'160px',
        form: {
          userName:'',
          name: '',
          region: '',
          type: '',
          user_state:"1",
          leader_identify:"0",
          guidance_identify:"0"

        },
        rules: {
          user_name: [
            { required: true,validator:checkUser,trigger: 'blur' }
          ],
          real_name:[
            { required: true,validator:checkRealName,trigger: 'blur' }
          ],
          role_name:[
            { required: true,validator:checkRole,trigger: 'blur' }
          ],
          company_name:[
            { required: true,validator:checkCompany,trigger: 'blur' }
          ],
          section_name:[
            { required: true,validator:checkSection,trigger: 'blur' }
          ],
          user_pwd:[
            { required: true,validator:validatePass,trigger: 'blur' }
          ],
          user_pwd_confirm:[
            { required: true,validator:validatePass2,trigger: 'blur' }
          ],
          user_position:[
            { required: true,validator:validatePosition,trigger: 'blur' }
          ],
          leader_identify:[
            { required: true,validator:validateLead,trigger: 'blur' }
          ],
          user_state:[
            { required: true,validator:validatState,trigger: 'blur' }
          ],
        },
        defaultProps: {
          children: 'son_company',
          label: 'company_name'
        },
      }
    },
    components:{
      fixed,
      userHeader
    },
    methods: {
      onSubmit(formName){
        let that =this
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.axios.post('/api/v1/system/users/',
              {
                user_name:this.form.user_name,
                real_name:this.form.real_name,
                role_id:this.form.role_id,
                company_id:this.form.company_id,
                section_id:this.form.section_name,
                user_position:this.form.user_position,
                leader_identify:this.form.leader_identify,
                user_state:this.form.user_state,
                user_pwd:this.form.user_pwd,

                guidance_identify:this.form.guidance_identify,
                regulate_section:this.regulate_section
              }
              )
              .then((res)=>{
                console.log(res)
                if(res.data.code==0){
                  this.form={};
                  this.$refs.tree.setCheckedNodes([]);
                  this.$alert('添加成功，点击后将会返回用户列表','提示',{
                    confirmButtonText: '确定',
                    callback: action => {
                      this.$router.push({
                        path:'/userManagement'
                      })
                    }
                })}
                else{
                    this.$alert(res.data.message,'提示',function () {
                  })
                }
              })
          }else{
            console.log('error submit!!');
            return false;
          }
        })
      },
      checkTest(data,checkNode){
        console.log(data.company_id)
        this.form.company_id=data.company_id
        if(this.form.section_name){
          this.form.section_name=''
        }
        this.getDepartement(data.company_id);
        this.getuserDepartement(data.company_id)
      },
      //树状结构分类
      changeCurrent(data,node,test){
//        console.log(data)
//        console.log(node)
      },
      setCheckedKeys(data,checked,node){
        this.i++;
        if(this.i%2==0) {
          if (checked) {
            this.$refs.tree.setCheckedNodes([]);
            this.$refs.tree.setCheckedNodes([data]);
            //交叉点击节点
          } else {
            this.currentNodeKey=''
            this.$refs.tree.setCheckedNodes([]);
            //点击已经选中的节点，置空
          }
        }else{
          this.currentNodeKey ={
            company_id:data.company_id,
            company_name:data.company_name
          }
        }
      },
      //获取角色选择
      getRoleType(){
        this.axios.get('/api/v1/system/userroles')
          .then((res)=>{
            if(res.data.code==0){
              this.roleType =res.data.data
              console.log(this.roleType)
            }
          }).catch((err)=>{
          console.log(err)
        })
      },
      //获取评价单位
      getCompany(){
        this.axios.get('/api/v1/system/comsection?subor=collar')
          .then((res)=>{
            console.log(res.data.data)
            if(res.data.code==0){
              this.data3 =res.data.data;
              this.loading =false
            }
          })
          .catch((err)=>{
            console.log(err)
          })
      },
      //获取部门
      getDepartement(company_id){
        this.sectionType=[]
        this.axios.get('/api/v1/system/comsection/'+`${company_id}`)
          .then((res)=>{
            console.log(res.data.data)
            if(res.data.code==0){
              this.loading =false
              this.sectionType =res.data.data
            }else{
              this.$alert(res.data.message,'提示')
            }
          })
          .catch((err)=>{
            console.log(err)
          })
      },
      //获取直管部门
      getuserDepartement(company_id){
        this.sectionType2=[]
        this.axios.get('/api/v1/system/usersection/'+`${company_id}`)
          .then((res)=>{
            console.log(res.data.data)
            if(res.data.code==0){
              this.loading =false
              this.sectionType2 =res.data.data
            }else{
              this.$alert(res.data.message,'提示')
            }
          })
          .catch((err)=>{
            console.log(err)
          })
      },
    },
    mounted(){
        this.getRoleType()
        this.getCompany();
//        this.form.user_state =1;
//        this.form.leader_identify =0;
    }
  })
</script>
<style scoped="">
  .addUserIndex{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
  }
  .addUserIndex  .el-form  >>>.el-input{
    width: 378px;
    height: 38px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
  }
  .addUserIndex .el-button--primary{
    background: #8bc34a;
    border-color: #8bc34a;
  }
  .addUserIndex >>> .el-form{
    margin-top: 35px;
  }
  .addUserIndex >>> .el-form .el-form-item__label{
    padding-right: 35px;
  }
  .addUserIndex >>> .el-form .el-form-item{
    margin-bottom: 22px;
    width: 540px;
  }
  .addUserIndex >>> .el-form  .el-radio__input.is-checked .el-radio__inner{
      background: #8cc34b;
    border-color: #8cc34b;
  }
  .addUserIndex >>> .el-form  .el-radio__input.is-checked+.el-radio__label{
    color:#8cc34b;
  }
  @media screen and (max-width: 1400px) {
    .addUserIndex{
      padding: 6px;
    }
  }
</style>
<style>


</style>

